<template>
  <a-cascader
    key="corporate"
    :options="pageData.corporateList"
    @change="corporateChange"
    v-model="pageData.corporateId"
    allow-clear
    class="bacClass"
    ref="corporateRef"
    :style="{ width: configCascader.corporateWidth }"
    :size="configCascader.size"
    :loading="pageData.corporateLoading"
    :disabled="corporateDisabled"
    popup-container="html"
  />
  <a-cascader
    v-if="configCascader.cascaderShow !== 'sector'"
    key="sector"
    v-model="pageData.sectorId"
    :options="pageData.sectorList"
    allow-clear
    :disabled="!pageData.corporateId"
    ref="sectorRef"
    :size="configCascader.size"
    :class="{
      bacClass: !(pageData.corporateId == null || pageData.corporateId == ''),
    }"
    :style="{ width: configCascader.sectorWidth }"
    @change="sectorChange"
    :loading="pageData.sectorLoading"
    popup-container="html"
  />
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted, onBeforeMount } from 'vue'
  import { post } from '@/api/http'
  import { Message } from '@arco-design/web-vue'
  import { slicing } from '@/utils/caseFrimAndSecRig'
  // ts写法
  interface CascaderInf {
    corporateWidth: string
    sectorWidth: string
    size: string
    cascaderShow?: string
    defaultCorporateVal: number
  }
  const props = withDefaults(
    defineProps<{
      configCascader: CascaderInf | any
    }>(),
    {
      configCascader: {
        corporateWidth: '200px', //公司宽度
        sectorWidth: '200px', //部门宽度
        size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
        cascaderShow: '', //选择框不显示配置默认为空，sector|corporate，当前需求展示只支持部门不显示
        defaultCorporateVal: undefined, //默认公司值
      },
    }
  )
  const setDefaultCorporateVal = () => {
    console.log(props, 'props.configCascader.defaultCorporateVal')

    if (props.configCascader.defaultCorporateVal) {
      pageData.corporateId = props.configCascader.defaultCorporateVal
    }
  }
  // const { cascaderShow } = toRefs(props.configCascader)
  //这种写法模板拿得到，但是在函数中拿不到
  // defineProps({
  //   configCascader: {
  //     type: Object,
  //     default: {
  //       corporateWidth: '200px', //公司宽度
  //       sectorWidth: '200px', //部门宽度
  //       corporateRquired: true, //公司是否必填
  //       sectorRquired: true, //部门是否必填
  //       size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
  //       corporateName: '采购公司', //公司label
  //       sectorName: '采购部门', //部门label
  //       cascaderShow: '', //选择框不显示配置默认为空，sector|corporate，当前需求展示只支持部门不显示
  //     },
  //   },
  // })
  const emits = defineEmits(['changeCascader'])
  let pageData = reactive<{
    sectorId: string | Number
    corporateId: string | Number
    sectorList: []
    corporateList: []
    corporateLoading: boolean
    sectorLoading: boolean
    corporateLabel: string
    sectorLabel: string
  }>({
    sectorId: '', //部门id
    corporateId: '', //公司id
    sectorList: reactive([]), //部门数据
    corporateList: reactive([]), //公司数据
    corporateLoading: false, //公司加载动画
    sectorLoading: false, //部门加载动画
    corporateLabel: '', //公司选中label
    sectorLabel: '', //部门选中label
  })
  const corporateRef = ref<any>()
  const sectorRef = ref<any>()
  onMounted(async () => {
    setDefaultCorporateVal()
    await getCorporateList()
    getSectorList(pageData.corporateId)
    nextTick(() => {
      emits('changeCascader', pageData)
    })
  })
  // 获取公司列表
  const getCorporateList = async () => {
    try {
      pageData.corporateLoading = true
      const res = await post({ url: 'org/baCompany/getTreeCompanyByUser' })
      if (res.code == 200) {
        pageData.corporateList = res.data
        if (res.data.length == 1 && !res.data[0].children) {
          pageData.corporateId = res.data[0].value
          pageData.corporateLabel = res.data[0].label
        }
        return
      }
      Message.error(res.message)
    } catch (error: any) {
      pageData.corporateLoading = false
    } finally {
      pageData.corporateLoading = false
    }
  }
  // 获取部门列表
  const getSectorList = async (val: any | number) => {
    try {
      pageData.sectorLoading = true
      const res = await post({ url: `org/baCompany/getDepartmentTree?companyId=${val} ` })
      if (res.code == 200) {
        pageData.sectorList = res.data
        return
      }
      Message.error(res.message)
    } catch (error: any) {
      pageData.sectorLoading = false
    } finally {
      pageData.sectorLoading = false
    }
  }
  //公司change事件
  const corporateChange = (event: any) => {
    console.log(props)
    if (!props.configCascader.cascaderShow || props.configCascader.cascaderShow == '') {
      getSectorList(event)
    }
    nextTick(() => {
      if (corporateRef.value.selectViewValue.length == 0) {
        pageData.corporateId = ''
        pageData.corporateLabel = ''
        pageData.sectorId = ''
        pageData.sectorLabel = ''
        pageData.sectorList = []
        emits('changeCascader', pageData)
        return
      }
      pageData.sectorId = ''
      pageData.corporateLabel = slicing(corporateRef.value.selectViewValue[0].label)
      emits('changeCascader', pageData)
    })
  }
  //部门change事件
  const sectorChange = (event: any) => {
    nextTick(() => {
      if (sectorRef.value.selectViewValue.length == 0) {
        pageData.sectorId = ''
        pageData.sectorLabel = ''
        emits('changeCascader', pageData)
        return
      }
      pageData.sectorLabel = slicing(sectorRef.value.selectViewValue[0].label)
      emits('changeCascader', pageData)
    })
  }
  //重置
  let _form = toRaw({ ...pageData })
  const resetForm = () => {
    // pageData = { ..._form }
    // pageData.corporateList = []
    //妈的有问题，里面的数组赋值了不显示，妈的
    pageData.sectorId = '' //部门id
    pageData.corporateId = '' //公司id
    pageData.sectorList = [] //部门数据
    pageData.corporateLabel = '' //公司选中label
    pageData.sectorLabel = '' //部门选中label
  }
  //父组件传参
  interface obj {
    sectorId: ''
    corporateId: ''
    corporateLabel: ''
    sectorLabel: ''
  }
  const parentComponent = (data: obj) => {
    const { sectorId, corporateId, corporateLabel, sectorLabel } = data
    pageData.sectorId = sectorId
    pageData.corporateId = corporateId
    pageData.corporateLabel = corporateLabel
    pageData.sectorLabel = sectorLabel
    getSectorList(corporateId)
  }
  const corporateDisabled = ref(false)
  const setcorDisabled = (data: boolean) => {
    corporateDisabled.value = data
  }
  // 对外暴露的属性
  defineExpose({
    resetForm,
    parentComponent,
    setcorDisabled,
  })
</script>
